<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>阿里百秀</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link href="dist/camroll_slider.css" rel="stylesheet" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
      #my-slider {
        width: 100%;
        height: 100%;
        color: white;
      }

      @media (max-width: 640px) {
        #my-slider .crs-bar-roll-current {
          width: 38px;
          height: 38px;
        }

        #my-slider .crs-bar-roll-item {
          width: 30px;
          height: 30px;
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <header class="col-md-2">
          <div class="logo">
            <a href="#">
              <img src="images/logo.png" alt="" class="hidden-xs" />
              <span class="visible-xs">阿里百秀</span>
            </a>
          </div>
          <div class="nav">
            <ul>
              <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
              <li>
                <a href="#" class="glyphicon glyphicon-picture">自然会</a>
              </li>
              <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
              <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
              <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
            </ul>
          </div>
        </header>
        <article class="col-md-7">
          <div class="news clearfix">
            <ul>
              <li>
                <!-- 轮播图 -->
                <!-- slider -->
                <div id="my-slider" class="crs-wrap">
                  <div class="crs-screen">
                    <div class="crs-screen-roll">
                      <div
                        class="crs-screen-item"
                        style="background-image: url('images/1.jpg')"
                      >
                        <div class="crs-screen-item-content">
                          <h1>Lorem...</h1>
                        </div>
                      </div>
                      <div
                        class="crs-screen-item"
                        style="background-image: url('images/2.jpg')"
                      >
                        <div class="crs-screen-item-content">
                          <h1>Lorem...</h1>
                        </div>
                      </div>
                      <div
                        class="crs-screen-item"
                        style="background-image: url('images/3.jpg')"
                      >
                        <div class="crs-screen-item-content">
                          <h1>Lorem...</h1>
                        </div>
                      </div>
                      <div
                        class="crs-screen-item"
                        style="background-image: url('images/4.jpg')"
                      >
                        <div class="crs-screen-item-content">
                          <h1>Lorem...</h1>
                        </div>
                      </div>
                      <div
                        class="crs-screen-item"
                        style="background-image: url('images/5.jpg')"
                      >
                        <div class="crs-screen-item-content">
                          <h1>Lorem...</h1>
                        </div>
                      </div>
                      <div
                        class="crs-screen-item"
                        style="background-image: url('images/6.jpg')"
                      >
                        <div class="crs-screen-item-content">
                          <h1>Lorem...</h1>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="crs-bar">
                    <div class="crs-bar-roll-current"></div>
                    <div class="crs-bar-roll-wrap">
                      <div class="crs-bar-roll">
                        <div
                          class="crs-bar-roll-item"
                          style="background-image: url('images/1.jpg')"
                        ></div>
                        <div
                          class="crs-bar-roll-item"
                          style="background-image: url('images/2.jpg')"
                        ></div>
                        <div
                          class="crs-bar-roll-item"
                          style="background-image: url('images/3.jpg')"
                        ></div>
                        <div
                          class="crs-bar-roll-item"
                          style="background-image: url('images/4.jpg')"
                        ></div>
                        <div
                          class="crs-bar-roll-item"
                          style="background-image: url('images/5.jpg')"
                        ></div>
                        <div
                          class="crs-bar-roll-item"
                          style="background-image: url('images/6.jpg')"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <a href="#">
                  <img src="upload/1.jpg" alt="" />
                  <p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/2.jpg" alt="" />
                  <p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/3.jpg" alt="" />
                  <p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/4.jpg" alt="" />
                  <p>阿里百秀阿里百秀阿里百秀阿里百秀</p>
                </a>
              </li>
            </ul>
          </div>
          <div class="publish">
            <div class="row">
              <div class="col-sm-9">
                <h3>生活馆拉阿拉阿拉啦啦啦啦啦</h3>
                <p class="text-muted hidden-xs">砂浆撒娇哈奥克斯据介绍</p>
                <p class="hidden-xs">
                  活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦
                </p>
                <p class="text-muted">
                  活馆拉阿拉<span class="hidden-xs"
                    >阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦</span
                  >
                </p>
              </div>
              <div class="col-sm-3 pic hidden-xs">
                <img src="upload/3.jpg" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>生活馆拉阿拉阿拉啦啦啦啦啦</h3>
                <p class="text-muted hidden-xs">砂浆撒娇哈奥克斯据介绍</p>
                <p class="hidden-xs">
                  活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦
                </p>
                <p class="text-muted">
                  活馆拉阿拉<span class="hidden-xs"
                    >阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦</span
                  >
                </p>
              </div>
              <div class="col-sm-3 pic hidden-xs">
                <img src="upload/3.jpg" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>生活馆拉阿拉阿拉啦啦啦啦啦</h3>
                <p class="text-muted hidden-xs">砂浆撒娇哈奥克斯据介绍</p>
                <p class="hidden-xs">
                  活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦
                </p>
                <p class="text-muted">
                  活馆拉阿拉<span class="hidden-xs"
                    >阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦活馆拉阿拉阿拉啦啦啦啦</span
                  >
                </p>
              </div>
              <div class="col-sm-3 pic hidden-xs">
                <img src="upload/3.jpg" alt="" />
              </div>
            </div>
          </div>
        </article>
        <aside class="col-md-3">
          <a href="#" class="banner">
            <img src="upload/zgboke.jpg" alt="" />
          </a>
          <a href="#" class="hot">
            <span class="btn btn-primary">热搜</span>
            <h4 class="text-primary">欢迎加入我们</h4>
            <p>巴拉巴拉巴拉巴卡拉阿阿拉阿拉加阿基拉</p>
          </a>
        </aside>
      </div>
    </div>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="dist/camroll_slider.js"></script>
    <script>
      $("#my-slider").camRollSlider();
    </script>
  </body>
</html>
